<template>
	<el-dialog v-model="visible" title="选择应用" :close-on-click-modal="false" :width="800">
		<el-table
			class="app-table"
			ref="multipleTableRef"
			v-loading="state.dataListLoading"
			:data="state.dataList"
			border
			style="width: 100%"
			max-height="500px"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="appKey" label="appKey" header-align="center" align="center"></el-table-column>
            <el-table-column prop="appSecret" label="appSecret" header-align="center" align="center"
                width="300"></el-table-column> -->
			<!-- <fast-table-column prop="expireDesc" label="token有效期" dict-type="api_expire_desc" header-align="center"
                align="center"></fast-table-column> -->
			<fast-creator-column prop="creator" label="创建者" header-align="center" align="center"></fast-creator-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { useCrud } from '@/hooks'
import { ElMessage } from 'element-plus/es'
import { reactive, ref, provide } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
const multipleTableRef = ref()
const state: IHooksOptions = reactive({
	dataListUrl: '/data-service/app/page',
	deleteUrl: '/data-service/app',
	queryForm: {
		name: '',
		appKey: ''
	},
	dataListSelections: []
})

const visible = ref(false)
const emit = defineEmits(['close'])

const init = () => {
	visible.value = true
	getDataList()
}

const submitHandle = () => {
	// console.log(state.dataListSelections)
	if (state.dataListSelections.length > 0) {
		visible.value = false
		const url = `http://${window.location.hostname}:8082/data-service/api/token/generate?appKey=${state.dataListSelections[0].appKey}&appSecret=${state.dataListSelections[0].appSecret}`
		emit('close', url)
	} else {
		ElMessage.warning('请选择一个应用')
	}
}

const handlerSelect = (selection, row) => {}

const selectionChangeHandle = val => {
	state.dataListSelections = val
	if (val.length > 1) {
		multipleTableRef.value.clearSelection()
		multipleTableRef.value.toggleRowSelection(val.pop())
	}
}

defineExpose({
	init
})

const { getDataList, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss" scoped></style>
